<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/basic.css"/>
		<style type="text/css">
			html,body{
				height: 100%;
			}
			.all{
				height: 100%;
				background: url(../images/bk.jpg) no-repeat center;
			}
			.all .box{
				background: url(../images/qv.png) no-repeat center;
				position: absolute;
				top: 100px;
				left: 150px;
				width: 750px;
				height: 750px;
				background-size: 700px;
			}
			.all .box img{
				position: relative;
				top: -60px;
				width: 750px;
				transform: scale(0.9);
			}
			.a-link{
				position: absolute;
				top: 250px;
				left: 850px;
				width: 552px;
				height: 224px;
			}
			.a-link ul{
				width: 550px;
				border-bottom: 1px solid #8A8A8A;
				padding-bottom: 15px;
			}
			.a-link ul li:nth-of-type(1){
				font-size: 50px;
				font-weight: bold;
			}
			.a-link ul li{
				font-size: 30px;
				font-weight: bold;
			}
			.a-link p{
				margin-top: 15px;
				font-size: 18px;
				font-family: "微软雅黑";
				font-weight: 600;
			}
			.nav-x{
				display: block;
				width: 40px;
				height: 40px;
				position: fixed;
				top: 250px;
				left: 1350px;
				z-index: 90;
			}
			.nav-x .nav-bar:nth-of-type(1){
				position: absolute;
				top: 12px;
				left: 0px;
				display: block;
				width: 30px;
				border-top: 5px solid #000000;
				border-bottom: 5px solid transparent;
				transform: rotate(45deg);
			}
			.nav-x .nav-bar:nth-of-type(2){
				position: absolute;
				top: 12px;
				left: 3px;
				display: block;
				width: 30px;
				border-top: 5px solid #000000;
				border-bottom: 5px solid transparent;
				transform: rotate(-45deg);
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="box">
				<img src="../images/item_art_crafts.png" >
			</div>
			<div class="a-link">
				<ul>
					<li>源石技艺</li>
					<li>Originiums Arts</li>
				</ul>
				<p>源石被发现之后，人们发掘出一种通过它来施放一系列令物质改变原有性状的技术，这种技术被称为源石技艺，常被俗称为“法术”。源石技艺所运用的能源，一般被认为来自于源石本身。而人是否能施放法术，以及所能施放法术的形式、强度、效果等，通常受到先天具备的素质、后天对源石技艺的学习能力这两方面因素的制约。</p>
			</div>
			<a href="../index.html#third"  class="nav-x">
				<span class="nav-bar"></span>
				<span class="nav-bar"></span>
			</a>
		</div>
	</body>
</html>
